<?php $token = session('token');?>

@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>页面图片管理</h5>
        </div>
        <div class="ibox-content">
            <div class="m-b">
            <a href="javascript:;" id="btnRefresh" class="btn btn-default"><i class="fa fa-refresh"></i> 刷新</a>
                @if($token['isHidden'])
                <a href="{{url('admin/pageadver/add')}}" class="btn btn-warning m-l-xs"><i class="fa fa-plus"></i> 添加页面广告位</a>
                @endif
            </div>
            <table id="tblDataList" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>标题</th>
                        <th>尺寸</th>
                        <th><a data-toggle="tooltip" data-placement="top" title="图片">图片</a></th>
                        <th><a data-toggle="tooltip" data-placement="top" title="审核">审</a></th>
                        <th width="65"></th>
                        @if($token['isHidden'])
                        <th width="65"></th>
                        @endif
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div id="pagination" class="text-center"></div>
        </div>
    </div>
</div>

<script id="tplDataList" type="text/html">
    @{{each rows as row i}}
    <tr data-id="@{{row.id}}">
        <td>@{{i+1}}</td>
        <td>@{{row.title}}</td>
        <td>@{{row.width}} × @{{row.height}}</td>
        <td>
            <a href="javascript:;" class="m-r-xs js-pic1" data-src="@{{row.pic1}}" data-width="@{{row.width}}" data-height="@{{row.height}}">
                @{{if row.pic1}}
                <i class="fa fa-file-image-o fa-lg"></i>
                @{{else}}
                <i class="fa fa-cloud-upload fa-lg"></i>
                @{{/if}}
            </a>
        </td>
        <td>
            <a href="javascript:;" class="js-status">
                @{{if row.status}}
                <i class="fa fa-check text-navy"></i>
                @{{else}}
                <i class="fa fa-ban text-danger"></i>
                @{{/if}}
            </a>
        </td>
        <td>
            <a href="javascript:;" class="m-r-xs js-edit">
                <i class="fa fa-pencil-square fa-lg"></i>编辑
            </a>
        </td>
        @if($token['isHidden'])
        <td>
            <a href="javascript:;" class="m-r-xs js-del">
                <i class="fa fa-times-circle fa-lg"></i>删除
            </a>
        </td>
        @endif
    </tr>
    @{{/each}}
</script>

<script id="tplUploadPic1" type="text/html">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title">图片上传</h4>
            </div>
            <div class="row modal-body">
                <div class="col-lg-6">
                    <div id="ImageUploader"></div>
                </div>
                <div class="col-lg-6">
                    <div id="pic1tureViewer">
                        <p>预览：</p>
                        @{{if src}}
                        <img src="@{{src}}" class="img-thumbnail" />
                        @{{else}}
                        <img src="/assets/images/blank.gif" class="img-thumbnail" />
                        @{{/if}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
@endsection

@section('pagescript')
<script src="/assets/swfobject/swfobject.js"></script>
<script>
    $('[data-toggle="tooltip"]').tooltip();
    $("#side-menu li[rel='pageadver']").addClass("active")
        .parents("ul").addClass("in").parents("li").addClass("active");

    seajs.use('models/pageadverModel', function(pageadverModel) {
        var filter = {"kw":"","page":1,"limit":10};
        var RenderPageList = function(){
            pageadverModel.getPageRows(filter, function(data){
                $("#tblDataList tbody").html(template("tplDataList", data));
                $("#pagination").html(page(data.page_count, data.total_rows, data.page));
            }, failure);
        };

        $("#btnRefresh").on("click", RenderPageList);
        $("#pagination").on("click", "li a", function(){
            filter.page = $(this).attr("rel");
            RenderPageList();
        });

        $("#tblDataList").on("click", ".js-status", function(){
            var obj = $(this).find('i'),
                id = $(this).parents('tr').eq(0).data('id'),
                status = obj.hasClass('fa-check') ? 0 : 1;
            obj.attr('class', 'fa fa-refresh animated rotateIn');
            pageadverModel.update({'id':id,'status':status}, function(){
                if(status){
                    obj.attr("class", 'fa fa-check text-navy');
                }else{
                    obj.attr("class", 'fa fa-ban text-danger');
                }
            }, failure);
        });

        $('#modalDialog').on('shown.bs.modal', function (e) {
            var xiSwfUrlStr = "{{asset('assets/swfobject/expressInstall.swf')}}";
            var flashvars = {
                "max_size": "10240",//图片文件大小，单位：KB
                "width": flash_vars.width, //裁剪宽度
                "height": flash_vars.height, //裁剪高度
                "uploadUrl": "{{url('admin/pageadver/upload-pic1')}}?id="+flash_vars.id, //上传地址
                "backcall": "uploadImageSuccess", //成功回调JS函数
                "cancelbackcall": "uploadImageCancel",//取消时js回调函数
            };
            var params = {
                menu: "false",
                scale: "noScale",
                allowFullscreen: "true",
                allowScriptAccess: "always",
                wmode:"transparent",
                bgcolor: "#FFFFFF"
            };
            var attributes = {"id":"ImageUploader"};
            swfobject.embedSWF("{{asset('assets/iemaker/ImageUploader.swf')}}", "ImageUploader", "350", "380", "10.1.0", xiSwfUrlStr, flashvars, params, attributes);
            swfobject.createCSS("#ImageUploader", "display:block;text-align:left;");
        });


        var flash_vars = {"id":0, "width":100, "height":100};
        $("#tblDataList").on("click", ".js-pic1", function(){
            flash_vars = {
                'id': $(this).parents('tr').eq(0).data("id"),
                'src': $(this).data("src"),
                'width': $(this).data("width"),
                'height': $(this).data("height")
            };
            $("#modalDialog").html(template("tplUploadPic1", flash_vars)).modal('show');
        });

        $("#tblDataList").on("click", ".js-edit", function(){
            var id = $(this).parents('tr').eq(0).data("id");
            window.location.href = "{{url('admin/pageadver/edit')}}?id=" + id;
            return false;
        });

        $("#tblDataList").on("click", ".js-del", function(e){
            var id = $(this).parents('tr').eq(0).data("id");
            layer.confirm('确定要删除此广告位吗？', {icon:3}, function(index){
                pageadverModel.delete({"id":id}, function(){
                    $(e.target).parents("tr").eq(0).remove();
                }, failure);
                layer.close(index);
            });
        });
        RenderPageList();
    });

    var uploadImageSuccess = function(result){
        var data = $.parseJSON(result);
        $("#pic1tureViewer img").eq(0).attr("src", data.pic1);
        var tr = $("#tblDataList").find("tr[data-id='"+ data.id +"']").eq(0),
            ta = tr.find(".js-pic1").eq(0);
        ta.data("src", data.pic1);
        ta.find("i").removeClass("fa-cloud-upload").addClass("fa-file-image-o");
    };

    var uploadImageCancel = function(){
        $("#modalDialog").html("").modal('hide');
    };
</script>
@endsection
